<template>
  <div>
    <el-card class="box-card">
      <el-form  :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="form.loginName"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="loginPwd">
          <el-input v-model.number="form.loginPwd"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="showName">
          <el-input v-model="form.showName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择活动区域">
            <el-option label="房东" :value="0"></el-option>
            <el-option label="中介" :value="1"></el-option>
            <el-option label="用户" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮件地址" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model.number="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="form.age"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即注册</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
    export default {
      name: "IndexPage",
      data(){
        return {
          form: {},
          rules: {
            loginName: [{required: true, message: '请输入登录名', trigger: 'blur'}],
            showName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
            status: [{required: true, message: '请输入选择状态', trigger: 'blur'}],
            email: [{required: true, message: '请输入邮件地址', trigger: 'blur'}],
            mobile: [{required: true, message: '请输入手机号码', trigger: 'blur'},{ type: 'number', message: '手机号码必须为数字值'}],
            sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
            age: [{required: true, message: '请输入年龄'},{ type: 'number', message: '年龄必须为数字值'}],
            loginPwd: [{required: true, message: '请输入登录密码'},{ type: 'number', message: '登录密码必须为数字值'}],
          }
        }
      },
      methods: {
        onSubmit() {
          this.$http.post("house-user/user/saveUser", this.form).then((res) => {
            this.$refs['form'].validate((valid) => {
              if (!valid) {
                return
              }

              //如何提示
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
                this.$router.push('/home')
              } else {
                this.$message.error(res.data.message)
              }

            })

          })
        }
      }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 1534px;height: 720px;
  }
</style>
